<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{mag}}</h1>
        <!-- 
            v-text指令：
            可以将指令的内容拿出来填充到标签体当中，和js的innerText一样
            这种填充式以覆盖形式来进行的，先清空标签体当中原有的内容，填充新的内容
            即使内容式一段html代码，这种方式也不会将html代码解析并执行，只会当作普通文本来处理
         -->
        <h1 v-text="name"></h1>
        <h1 v-text="name">test</h1>
        <h1 v-text="s1"></h1>
        <!-- v-html指令：
             和v-text一样，也是填充标签体内容也是采用覆盖的形式进行
            只不过v-html会将内容当作一段html代码解析并执行
            和js中的innerHtml功能一样 -->
        <h1 v-html="s1"></h1>
        <ul>
            <li v-for="m,index of messageList" :key="index" v-html="m"></li>
        </ul>
        <textarea ols="30" rows="10" v-model.lazy="message"></textarea>
        <br><br>
        <button @click="save">保存留言</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                mag: 'vue的其它指令',
                name: 'cyh',
                message: '',
                messageList: [],
                s1: '<h1>黄奕大家</h1>'
            },
            methods: {
                save() {
                    this.messageList.push(this.message);
                }
            }
        })
    </script>
</body>

</html>